<template>
  <div class="frame">

    <h1 class="title">航木人力资源管理系统</h1>

    <div class="box">
      <div class="image-style"></div>

      <div class="router">

        <a @click.prevent="onSubmit(1)" href="#" :class="{'backColor1':this.color1}">
          <div class="main">
              <el-image src="https://edu-10yh.oss-cn-hangzhou.aliyuncs.com/images/login/name.png" class="img"></el-image>
          </div>
        </a>

        <a @click.prevent="onSubmit(2)" href="#" :class="{'backColor2':this.color2}">
          <div class="main">
            <span></span>
          </div>
        </a>

        <a @click.prevent="onSubmit(3)" href="#" :class="{'backColor3':this.color3}">
          <div class="main">
            <span></span>
          </div>
        </a>

      </div>

      <div class="core">
        <div class="login_box" v-if="color1">
          <el-form ref="loginFormRef" :model="login" :rules="loginRules" class="login_form" label-width="0px">
            <span class="loginFont">登录</span>
            <div class="login">
              <el-form-item prop="username" label-width="100px">
                <el-input v-model="login.username" placeholder="用户名" clearable prefix-icon="el-icon-user-solid"></el-input>

              </el-form-item>

              <el-form-item prop="password" label-width="100px">
                <el-input v-model="login.password" type="password" clearable placeholder="密码" prefix-icon="el-icon-lock"></el-input>
              </el-form-item>
            </div>
            <el-form-item class="btns" style="margin-left:120px">
              <el-button type="info"  @click="resetLoginForm"> 重置 </el-button>
              <el-button type="info"  @click="loginFn">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>

    </div>
  </div>

</template>

<script>
import {login} from "@/api/auth/login";

export default {
  data(){
    return{
      color1:true,
      color2:false,
      color3:false,
      login: {
        username: "",
        password: "",
      },
      loginRules: {
        name: [
          {required: true, message: "请输入用户名", trigger: "blur"},
          {min: 8, max: 20, message: "长度在 2 到 8 个字符", trigger: "blur"},
        ],
        password: [
          {required: true, message: "请输入密码", trigger: "blur"},
          {min: 8, max: 20, message: "密码为 2~8 位", trigger: "blur"},
        ]
      }
    }
  },
  methods:{
    onSubmit(index){
      if (index === 1){
        this.color1 = true
        this.color2 = false
        this.color3 = false
      }else if (index === 2){
        this.color2 = true
        this.color1 = false
        this.color3 = false
      }else {
        this.color3 =true
        this.color1 = false
        this.color2 = false
      }
    },
    resetLoginForm() {
      this.login.username = ''
      this.login.password = ''
    },
    async loginFn(){
      const {data:res} = await login(this.login)
      if (res.code === 200){
        this.$cookies.set("token",res.data.token,43200)
        await this.$router.push({path: '/from'})
      }
    },


  }
}
</script>

<style scoped>
.frame{
  width:100%;
  height:929px;
  background-image: url(../../assets/images/cool-background.png);
  background-size: cover;
}
.title{
  position:absolute;
  left:790px;
  top:180px;
  font-size:35px;
}

.box{
  float:left;
  margin-top:250px;
  width:1050px;
  height:372px;
  margin-left:540px;
}
.image-style{
  float:left;
  width:250px;
  height:371px;
  background: url(../../assets/images/m.jpg) no-repeat center;
}
.router{
  width:200px;
  height:371px;
  color:#333;
  display:block;
  float:left;
  background-color:blanchedalmond;
}
.router a{
  width:200px;
  height:124px;
  border-right:1px solid #000;
  display: block;
}

.core{
  width:400px;
  float:left;
  height:371px;
  background: url(../../assets/images/bg.jpg) no-repeat center;
}

.backColor1{
  background-color:#00ad45;
}
.backColor2{
  background-color:#00ad45;
}
.backColor3{
  background-color:#00ad45;
}
.img{
  width:60px;
  height:60px;
}
.main{
  padding-left:70px;
  padding-top: 21px;
}
.login_box{
  width:400px;
  height:371px;
}
.login_form{
  width:400px;
  height:371px;
}
.login{
  margin-top:120px;
  margin-right: 100px;
}
.loginFont{
  font-size:20px;
  position:absolute;
  left:1160px;
  top:320px
}
</style>



